<script setup lang="ts">
// import { useGuessList } from '../../composables'

// 获取页面参数
const query = defineProps<{
  id: string
}>()

// 猜你喜欢
// const { guessRef, onScrolltolower } = useGuessList()
</script>

<template>
  <!-- @scrolltolower="onScrolltolower" -->
  <scroll-view class="viewport" :enable-flex="true" scroll-y>
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status">支付成功</view>
      <view class="buttons">
        <navigator
          hover-class="none"
          class="button navigator"
          url="/pages/index/index"
          open-type="switchTab"
        >
          返回首页
        </navigator>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`/pagesOrder/detail/detail?id=${query.id}`"
          open-type="redirect"
        >
          查看订单
        </navigator>
      </view>
    </view>

    <!-- 猜你喜欢 -->
    <!-- <XtxGuess ref="guessRef" /> -->
  </scroll-view>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  background-color: rgb(240, 240, 240);
  // 内容居中
  display: flex;
  justify-content: center;
  align-items: center;
}

.overview {
  width: 100%;
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  margin: 0 50rpx;
  background-color: #27ba9b;
  height: 500rpx;
  // 圆角
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 20rpx;
    font-size: 30rpx;
    color: #fff;
    // 下划线
    text-decoration: underline;
  }
}
</style>
